<template>
    <div>
        <PropTable
            :columns="column"
            :data="TableData"
            :loading="loading"
            :show-search="false"
            @onSubmit="getPageList(item.value)"
            @reset="handleReset"
        >
            <template #stocked='scope'>
                <span v-if='scope.row.stocked === 0' class='ml-2'>师范实习基地</span>
                <span v-else-if='scope.row.stocked === 1'>工程类实习基地</span>
                <span v-else-if='scope.row.stocked === 2'>医学类实习基地</span>
                <span v-else-if='scope.row.stocked === 3'>其他</span>
            </template>
            <template #operation="scope">
                <el-tooltip
                    content="查看使用专业"
                    placement="top"
                >
                    <el-button
                        type="text"
                        icon="Notebook"
                    />
                </el-tooltip>
                <el-tooltip content="修改" placement="top" v-hasPermi="['sx_create']">
                    <el-button
                        type="text"
                        icon="Edit"
                    />
                </el-tooltip>
                <el-tooltip   content="删除" placement="top" >
                    <el-button
                        type="text"
                        icon="Delete"
                    />
                </el-tooltip>
            </template>
            <template #pag>
                <pagination
                    v-show="total > 0"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    :total="total"
                    @pagination="getList"
                />
            </template>
        </PropTable>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref, toRefs} from "vue";
import axios from "axios";
import PropTable from "@/components/PropTable/PropTable.vue";

const column = [
    {
        name: 'category',
        label: '基地名称',
        align: 'center',
        overflow: true,
    },
    {
        name: 'price',
        label: '创建院系',
        align: 'center',
        overflow: true,
        sorter: true,
    },
    {
        name: 'stocked',
        label: '基地类型',
        align: 'center',
        slot: true,
        sorter: true,
        overflow: true,
    },
    {
        name: 'name',
        label: '基地类型',
        align: 'center',
        sorter: true,
        overflow: true,
    },
    {name: 'operation', slot: true, width: 120, fixed: 'right', label: '操作'},
]
// 查询请求数据
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
});
const {queryParams} = toRefs(data)
const TableData = ref([]) // 表格数据
const total = ref(0);
const loading = ref(true) // 加载等待
const getList = async ()=> {
    loading.value = true
    await axios.get('http://localhost:3008/productList').then(res=>{
        TableData.value = res.data
        total.value = res.data.length;
        console.log("TableData.value",TableData.value)
    })
    loading.value = false;
}
// 分页查询
const getPageList = () => {
    queryParams.value.pageNum = 1
    getList()
}
// 重置
const handleReset = () => {
    Object.keys(queryParams.value).forEach((key) => {
        if (key === 'pageNum') queryParams.value[key] = 1
        else if (key === 'pageSize') queryParams.value[key] = 10
        else if (key === 'type') queryParams.value[key] = 0
        else queryParams.value[key] = undefined
    })
    getPageList()
}
onMounted(()=>{
    getList()
})
</script>

<style lang="scss" scoped>

</style>
